import React from 'react'
import PropTypes from 'prop-types'
import { NavLink } from 'react-router-dom'
import { IconFont } from 'components'
import './FooterNav.scss'

const iconClickHandler = (link) => {
  stat({
    category: '底部导航',
    action: '导航切换',
    label: link,
  })
}

function FooterNav(props) {
  return (
    <div styleName="tab-bar">
      {props.navList.map(nav => (
        <NavLink
          key={nav.id}
          exact
          to={nav.link}
          activeClassName="tab-selected"
          styleName="tab"
          onClick={() => iconClickHandler(nav.link)}
        >
          <div>
            <div styleName="tab-icon">
              <IconFont type={nav.pic} />
            </div>
            <p styleName="tab-title">{nav.name}</p>
          </div>
        </NavLink>
      ))}
    </div>
  )
}

FooterNav.propTypes = {
  navList: PropTypes.array.isRequired,
}

export default FooterNav
